<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">

         <style>
              *{
              	margin:0;
              	padding:0;
              }
			 .box{
			 	 width:600px;
			 	 height:150px;
			 	 background-image:url("banner_bg.jpg");
			 	 margin:0 auto;
			 }

			 .nav{
			 	background-image:url("nav_bg.jpg");
			 	height:32px;
			 }

			 li{
			 	list-style:none;
			 	float:left;
			 	
			 }

			 li a{
			 	 height:32px;
			 	 width:80px;
			 	 display:inline-block;
			 	 background-image:url("a_bg.jpg");
			 	 line-height:32px;
			 	 text-align:center;
			 	 text-decoration:none;
			 }

			 li a:hover{
			 	 background-image:url("button2.jpg");
			 }
         </style>
    </head>
    <body>

           <div class="box">
           		<img src="banner1.jpg">
           		<div class="nav">
           			<ul>
           				<li><a href="#">首页导航</a></li>
           				<li><a href="#">首页导航</a></li>
           				<li><a href="#">首页导航</a></li>
           				<li><a href="#">首页导航</a></li>
           				<li><a href="#">首页导航</a></li>
           				<li><a href="#">首页导航</a></li>
           			</ul>
           		</div>
           </div>
    </body>
</html>